<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Envio de formulário sem refresh com JQuery/PHP</title>
<style type="text/css">
body {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 13px;
}

h1 {
	font-size: 18px;
	color: #069;
	border-bottom: 1px #999 dashed;
}

input, textarea {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 13px;
	padding: 5px;
	border: 1px #999 solid;
	background:  #F9F9F9;
}

#status {
	padding: 5px 0 15px 0;
	display: none;
	color: #900;
	font-weight: bold;
}
</style>
<!-- Incluimos a biblioteca do jquery -->
<script type="text/javascript" language="javascript" src="jquery-1.3.2.js"></script>
<!-- Criamos as funções necessárias para envio do formulário -->
<script type="text/javascript" language="javascript">
$(function($) {
	// Quando o formulário for enviado, essa função é chamada
	$("#formulario").submit(function() {
		// Colocamos os valores de cada campo em uma váriavel para facilitar a manipulação
		var nome = $("#nome").val();
		var email = $("#email").val();
		var mensagem = $("#mensagem").val();
		// Exibe mensagem de carregamento
		$("#passo1").html("<img src='loader.gif' alt='Enviando' />");
		// Fazemos a requisão ajax com o arquivo envia.php e enviamos os valores de cada campo através do método POST
		$.post('passo1.php', {nome: nome, email: email, mensagem: mensagem }, function(resposta) {
				// Quando terminada a requisição
				// Exibe a div status
				$("#status").slideDown();
				// Se a resposta é um erro
				if (resposta != false) {
					// Exibe o erro na div
					$("#passo1").html(resposta);
				} 
				// Se resposta for false, ou seja, não ocorreu nenhum erro
				else {
					// Exibe mensagem de sucesso
					$("#status").html("Mensagem enviada com sucesso!");
					// Coloca a mensagem no div de mensagens
					$("#passo1").prepend("<strong>"+ nome +"</strong> disse: <em>" + mensagem + "</em><br />");
					// Limpando todos os campos
					$("#nome").val("");
					$("#email").val("");
					$("#mensagem").val("");
				}
		});
	});
});
</script>
</head>

<body>
<h1>Escrever Mensagem</h1>

<div id="status"></div>

<div id="escrever">
	<form id="formulario" action="javascript:func()" method="post">
	    <strong>Nome:</strong> <br />
        <input name="nome" type="text" id="nome" size="35" /> <br /><br />
        
	    <strong>Email:</strong> <br />
        <input name="email" type="text" id="email" size="35" /> <br /><br />
        
	    <strong>Mensagem:</strong>  <br />
	    <input name="mensagem" type="text" id="mensagem" size="145" />
  <br /><br />
        
        <input type="submit" value="Enviar" />
        
    </form>
</div>

<h1>Mensagens</h1>

<div id="passo1">
</div>
</body>
</html>